<template>

	<div id="ShouCangGood" style="width: 300px;height: 200px;border:1px solid #2CC3CF;">
		<div style="display: flex;flex-direction: row;">
			<div id="left" style="width: 40%;height: 70%;text-align: center;position: absolute;margin-top: 20px;">
				<div class="goods">
					<img :src="imgSrc" width="70%" height="50%" alt style="border: 1px solid #42B983;" />
				</div>
			</div>
			<div id="right" style="background-color:white;width: 50%;height: 70%;position: absolute;margin-left: 350px;">
				<el-input v-model="medicineName" style="width: auto;height: auto;position: absolute;margin-top: 20px;font-size: 18px;"></el-input><br><br>
				<div style="position: absolute;margin-top: 60px;">
					<el-tag color="white" style="color: orangered;font-size: 40px;border: 0px;">¥</el-tag>
					<el-input v-model="medicinePrice" style="width: 100px;height: 20px;position: absolute;margin-top: -5px;margin-left: 10px;font-size: 15px;"></el-input><br><br>
				</div>

				<div style="position: absolute;margin-top: 180px;">
					<el-tag color="white" style="color: orangered;font-size: 30px;border: 0px;">总价</el-tag>
					<el-input v-model="totalPrice" style="width: 100px;height: 20px;position: absolute;margin-top: -5px;margin-left: 10px;font-size: 13px;"></el-input>
					<div style="position: absolute;margin-left: 250px;margin-top: -34px;">
						<el-input-number v-model="num" @change="handleChange" :min="1" :max="100" label="描述文字" style="transform: scale(0.8);"></el-input-number>
					</div>
				</div>
			</div>

		</div>
	</div>

	</div>

</template>

<script>
	export default  {
		data() {
			return {
				medicineName: "药品名称",
				medicinePrice: "药品价格",
				totalPrice: "总价",
				num: 1,
				imgSrc: require("../../assets/1.png")

			}
		},
		methods: {
			handleChange(value) {
				console.log(value);
			}
		}
	}
</script>

<style>
</style>
